<template>
  <div>
    <div v-if="showbutton"><el-button @click="submit()"> 填报</el-button></div>
    <table style="width: 100%" border="1" cellspacing="1">
      <tbody>
        <tr>
          <td colspan="1">学校名称</td>
          <td colspan="4"><input type="text" v-model="dataform.orgName" /></td>
          <td colspan="2">网站选址(选填)</td>
          <td colspan="2">
            <input type="text" v-model="dataform.intAddress" />
          </td>
        </tr>
        <tr>
          <td colspan="1">法定代表人(校长)</td>
          <td colspan="4">
            <input type="text" v-model="dataform.legalPerson" />
          </td>
          <td colspan="2">固定电话</td>
          <td colspan="2">
            <input type="text" v-model="dataform.legalPersonPhone" />
          </td>
        </tr>
        <tr>
          <td colspan="1">分管体育副校长</td>
          <td colspan="4">
            <input type="text" v-model="dataform.vicePresident" />
          </td>
          <td colspan="2">固定电话</td>
          <td colspan="2">
            <input type="text" v-model="dataform.vicePresidentPhone" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">体育组组长</td>
          <td colspan="3" rowspan="2">
            <input type="text" v-model="dataform.groupLeader" />
          </td>
          <td colspan="2">手机</td>
          <td colspan="3">
            <input type="text" v-model="dataform.groupLeaderPhone" />
          </td>
        </tr>
        <tr>
          <td colspan="2">电子邮箱</td>
          <td colspan="3">
            <input type="text" v-model="dataform.groupLeaderEmail" />
          </td>
        </tr>
        <tr>
          <td colspan="1">学校通讯地址</td>
          <td colspan="5">
            <input type="text" v-model="dataform.phoneAddress" />
          </td>
          <td colspan="1">邮编</td>
          <td colspan="2"><input type="text" v-model="dataform.postcode" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">学校所属重点学校类型(相应选项后划“√”)</td>
          <td colspan="3">省级重点(示范校)</td>
          <td><input type="text" v-model="schoolType.province" /></td>
          <td colspan="4" rowspan="2">开展项目名称</td>
        </tr>
        <tr>
          <td colspan="3">地市级级重点(示范校)</td>
          <td><input type="text" v-model="schoolType.city" /></td>
        </tr>
        <tr>
          <td colspan="3">区县级重点(示范校)</td>
          <td><input type="text" v-model="schoolType.county" /></td>
          <td colspan="4" rowspan="2">篮球、排球、乒乓球</td>
        </tr>
        <tr>
          <td colspan="3">普通学校</td>
          <td><input type="text" v-model="schoolType.Normal" /></td>
        </tr>
        <tr>
          <td colspan="1" rowspan="7">学校类别(在相应的选项后划“√”)</td>
          <td colspan="2">小学</td>
          <td colspan="2">
            <input type="text" v-model="SchoolGeneralCategory.PrimarySchool" />
          </td>
          <td colspan="2" rowspan="7">在校学生数量</td>
          <td colspan="2" rowspan="7">
            <input type="text" v-model="dataform.studentNum" />
          </td>
        </tr>

        <tr>
          <td colspan="2">初中</td>
          <td colspan="2">
            <input
              type="text"
              v-model="SchoolGeneralCategory.JuniorHighSchool"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">高中</td>
          <td colspan="2">
            <input
              type="text"
              v-model="SchoolGeneralCategory.SeniorHighSchool"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">小学、初中一体</td>
          <td colspan="2">
            <input
              type="text"
              v-model="SchoolGeneralCategory.PrimaryOrJuniorHigh"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">初中、高中一体</td>
          <td colspan="2">
            <input
              type="text"
              v-model="SchoolGeneralCategory.JuniorHighOrSeniorHigh"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">小学、初中、高中一体</td>
          <td colspan="2">
            <input
              type="text"
              v-model="SchoolGeneralCategory.PrimaryOrJuniorHighOrSeniorHigh"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2">中专，职高、技校等</td>
          <td colspan="2">
            <input
              type="text"
              v-model="SchoolGeneralCategory.rofessionalHighSchool"
            />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">所获级别命名授予时间(年份)</td>
          <td colspan="5">国家级体育传统项目学校</td>
          <td colspan="3">
            <input type="text" v-model="dataform.getNationYear" />
          </td>
        </tr>
        <tr>
          <td colspan="5">省级体育传统项目学校</td>
          <td colspan="3">
            <input type="text" v-model="dataform.getProvinceYear" />
          </td>
        </tr>
        <tr>
          <td colspan="5">地市级体育传统项目学校</td>
          <td colspan="3">
            <input type="text" v-model="dataform.getCityYear" />
          </td>
        </tr>
        <tr>
          <td colspan="5">县级级体育传统项目学校</td>
          <td colspan="3">
            <input type="text" v-model="dataform.getCountyYear" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">
            体育传统项目学校运作情况(相应选项后划“√”)
          </td>
          <td colspan="4">独立运作</td>
          <td colspan="4">
            <input type="text" v-model="dataform.runningOne" />
          </td>
        </tr>
        <tr>
          <td colspan="1">同时开办“青少年体育俱乐部”</td>
          <td colspan="4">
            <input type="text" v-model="dataform.runningTwo" />
          </td>
          <td colspan="1">青少年体育俱乐部名称(如有，请填写)</td>
          <td colspan="2">
            <input type="text" v-model="dataform.clubTeenager" />
          </td>
        </tr>
        <tr>
          <td colspan="1">与省市体校合办运动队</td>
          <td colspan="4">
            <input type="text" v-model="dataform.runningThree" />
          </td>
          <td colspan="1">省市体校运动队名称(如有，请填写)</td>
          <td colspan="2">
            <input type="text" v-model="dataform.clubSport" />
          </td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="dataform.fSheet3bList.length + 2">
            体育场地
            <el-tooltip
              content="右键点击输入框可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <span style="color: #666; font-size: 12px; cursor: help;">
                ⓘ
              </span>
            </el-tooltip>
          </td>
          <td colspan="2" rowspan="2">类型/名称</td>
          <td colspan="1" rowspan="2">数量(个)</td>
          <td colspan="1" rowspan="2">面积(平方米)</td>
          <td colspan="2" rowspan="2">社会开放情况(如是请划“√”)</td>
          <td colspan="2">如开放请选择开放类型(在相应选项后划“√”)</td>
        </tr>
        <tr>
          <td colspan="1">每天开放</td>
          <td colspan="1">节假日开放</td>
        </tr>
        <tr v-for="(item, index) in dataform.fSheet3bList" :key="index">
          <td colspan="2">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="dataform.fSheet3bList[index].placeName"
                @contextmenu.prevent="showContextMenu($event, index)"
              />
            </el-tooltip>
          </td>
          <td colspan="1">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="dataform.fSheet3bList[index].num"
                @contextmenu.prevent="showContextMenu($event, index)"
              />
            </el-tooltip>
          </td>
          <td colspan="1">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="dataform.fSheet3bList[index].acreage"
                @contextmenu.prevent="showContextMenu($event, index)"
              />
            </el-tooltip>
          </td>
          <td colspan="2">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="dataform.fSheet3bList[index].openState"
                @contextmenu.prevent="showContextMenu($event, index)"
              />
            </el-tooltip>
          </td>
          <td colspan="1">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="dataform.fSheet3bList[index].everydayOpen"
                @contextmenu.prevent="showContextMenu($event, index)"
              />
            </el-tooltip>
          </td>
          <td colspan="1">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="dataform.fSheet3bList[index].holidayOpen"
                @contextmenu.prevent="showContextMenu($event, index)"
              />
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="6">体育经费投入</td>
          <td colspan="2">当年体育经费投入(万元)(选填)</td>
          <td colspan="2"><input type="text" v-model="dataform.allMoney" /></td>
          <td colspan="2">当年生均体育经费投入(元)</td>
          <td colspan="2"><input type="text" v-model="dataform.avgMoney" /></td>
        </tr>
        <tr>
          <td colspan="2">用于传统项目校代表队(训练与比赛)经费(万元)(选填)</td>
          <td colspan="6">
            <input type="text" v-model="dataform.traditionSportMoney" />
          </td>
        </tr>
        <tr>
          <td colspan="2">其中教育局补助(万元)(选填)</td>
          <td colspan="6"><input type="text" v-model="dataform.eduMoney" /></td>
        </tr>
        <tr>
          <td colspan="2">其中体育局补助(万元)(选填)</td>
          <td colspan="6">
            <input type="text" v-model="dataform.sportMoney" />
          </td>
        </tr>
        <tr>
          <td colspan="2">本校自筹(万元)(选填)</td>
          <td colspan="6">
            <input type="text" v-model="dataform.schoolMoney" />
          </td>
        </tr>
        <tr>
          <td colspan="2">其他经费(万元)(选填)</td>
          <td colspan="6">
            <input type="text" v-model="dataform.otherMoney" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="8">体育师资</td>
          <td colspan="1" rowspan="4">在编体育教师数量</td>
          <td colspan="2" rowspan="2">学历</td>
          <td colspan="2">本科以下</td>
          <td colspan="2">本科</td>
          <td colspan="2">本科以上</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="dataform.benDownOn" />
          </td>
          <td colspan="2"><input type="text" v-model="dataform.benOn" /></td>
          <td colspan="2"><input type="text" v-model="dataform.benUpOn" /></td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2">职称</td>
          <td colspan="2">初级</td>
          <td colspan="1">中级</td>
          <td colspan="1">高级</td>
          <td colspan="1">高级以上</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="dataform.levelOneOn" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.levelTwoOn" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.levelThreeOn" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.levelFourOn" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">外聘指导教师/练(人数)</td>
          <td colspan="2" rowspan="2">学历</td>
          <td colspan="2">本科以下</td>
          <td colspan="2">本科</td>
          <td colspan="2">本科以上</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="dataform.benDownOut" />
          </td>
          <td colspan="2"><input type="text" v-model="dataform.benOut" /></td>
          <td colspan="2"><input type="text" v-model="dataform.benUpOut" /></td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2">职称</td>
          <td colspan="2">初级</td>
          <td colspan="1">中级</td>
          <td colspan="1">高级</td>
          <td colspan="1">高级以上</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="dataform.levelOneOut" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.levelTwoOut" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.levelThreeOut" />
          </td>
          <td colspan="1">
            <input type="text" v-model="dataform.levelFourOut" />
          </td>
        </tr>
        <tr>
          <td
            colspan="1"
            :rowspan="33 + (dataform.fSheet3eList.length - 3) * 11"
          >
            开展传统项目情况
          </td>
          <td colspan="2" rowspan="11">传统项目1</td>
          <td colspan="2">项目名称</td>
          <td colspan="5">
            <input
              type="text"
              v-model="dataform.fSheet3eList[0].traditionSportName"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2">带训在编教师(人数)</td>
          <td colspan="2">专职带训教师</td>
          <td colspan="2">兼职带训教师</td>
        </tr>
        <tr>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet3eList[0].fullTimeTeacherNum"
            />
          </td>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet3eList[0].partTimeTeacherNum"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2">带训外聘教师/教练(人数)</td>
          <td colspan="2">指导教师</td>
          <td colspan="2">教练</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet3eList[0].teacherNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet3eList[0].coachNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2">校代表队人数</td>
          <td colspan="2">男队</td>
          <td colspan="2">女队</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet3eList[0].manGroupNum" />
          </td>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet3eList[0].womanGroupNum"
            />
          </td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2">代表队学生运动级别(人数)</td>
          <td colspan="2">二级以上(含二级)</td>
          <td colspan="2">其他</td>
        </tr>
        <tr>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet3eList[0].secondLevelNum"
            />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet3eList[0].otherNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2" rowspan="2">训练次数和时间</td>
          <td colspan="2">每周训练(次)</td>
          <td colspan="2">每周训练时间(分钟)</td>
        </tr>
        <tr>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet3eList[0].weekNum" />
          </td>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet3eList[0].everyTimeNum"
            />
          </td>
        </tr>
        <template v-for="(item, index) in dataform.fSheet3eList.slice(1)">
          <tr>
            <td
              colspan="2"
              rowspan="11"
              @contextmenu.prevent="
                showTraditionalSportContextMenu($event, index + 1)
              "
            >
              <el-tooltip
                content="右点击可以新增或删除传统项目"
                placement="top"
                effect="light"
                :open-delay="500"
              >
                <div>
                  传统项目{{ index + 2 }}
                  <span
                    style="color: #666; font-size: 12px; cursor: help;"
                    v-show="index === dataform.fSheet3eList.length - 2"
                  >
                    ⓘ
                  </span>
                </div>
              </el-tooltip>
            </td>
            <td colspan="2">项目名称</td>
            <td colspan="5">
              <input type="text" v-model="item.traditionSportName" />
            </td>
          </tr>
          <tr>
            <td colspan="2" rowspan="2">带训在编教师(人数)</td>
            <td colspan="2">专职带训教师</td>
            <td colspan="2">兼职带训教师</td>
          </tr>
          <tr>
            <td colspan="2">
              <input type="text" v-model="item.fullTimeTeacherNum" />
            </td>
            <td colspan="2">
              <input type="text" v-model="item.partTimeTeacherNum" />
            </td>
          </tr>
          <tr>
            <td colspan="2" rowspan="2">带训外聘教师/教练(人数)</td>
            <td colspan="2">指导教师</td>
            <td colspan="2">教练</td>
          </tr>
          <tr>
            <td colspan="2"><input type="text" v-model="item.teacherNum" /></td>
            <td colspan="2"><input type="text" v-model="item.coachNum" /></td>
          </tr>
          <tr>
            <td colspan="2" rowspan="2">校代表队人数</td>
            <td colspan="2">男队</td>
            <td colspan="2">女队</td>
          </tr>
          <tr>
            <td colspan="2">
              <input type="text" v-model="item.manGroupNum" />
            </td>
            <td colspan="2">
              <input type="text" v-model="item.womanGroupNum" />
            </td>
          </tr>
          <tr>
            <td colspan="2" rowspan="2">代表队学生运动级别(人数)</td>
            <td colspan="2">二级以上(含二级)</td>
            <td colspan="2">其他</td>
          </tr>
          <tr>
            <td colspan="2">
              <input type="text" v-model="item.secondLevelNum" />
            </td>
            <td colspan="2"><input type="text" v-model="item.otherNum" /></td>
          </tr>
          <tr>
            <td colspan="2" rowspan="2">训练次数和时间</td>
            <td colspan="2">每周练(次)</td>
            <td colspan="2">每周训练时间(分钟)</td>
          </tr>
          <tr>
            <td colspan="2"><input type="text" v-model="item.weekNum" /></td>
            <td colspan="2">
              <input type="text" v-model="item.everyTimeNum" />
            </td>
          </tr>
        </template>
        <tr>
          <td colspan="1" rowspan="10">学生走向</td>
          <td colspan="3">走向种类</td>
          <td colspan="3">以往年度累计人数</td>
          <td colspan="2">上一年度人数</td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">体育系统输送</td>
          <td colspan="2">省队(一线)</td>
          <td colspan="3">
            <input type="text" v-model="dataform.oneLineAllNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.oneLineUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">省级体校(二线)</td>
          <td colspan="3">
            <input type="text" v-model="dataform.twoLineAllNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.twoLineUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">上一级体校(三线)</td>
          <td colspan="3">
            <input type="text" v-model="dataform.threeLineAllNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.threeLineUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="3">教育系统输送</td>
          <td colspan="2">体育院校</td>
          <td colspan="3">
            <input type="text" v-model="dataform.sportSchoolAllNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.sportSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">普通院校</td>
          <td colspan="3">
            <input type="text" v-model="dataform.commonSchoolAllNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.commonSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="2">高校高水平运动队</td>
          <td colspan="3">
            <input type="text" v-model="dataform.highSchoolAllNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.highSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="3">部队体工队</td>
          <td colspan="3">
            <input type="text" v-model="dataform.troopSchoolAllNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.troopSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="3">就业</td>
          <td colspan="3">
            <input type="text" v-model="dataform.jobSchoolAllNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.jobSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td colspan="3">其他</td>
          <td colspan="3">
            <input type="text" v-model="dataform.otherSchoolAllNum" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.otherSchoolUpNum" />
          </td>
        </tr>
        <tr>
          <td
            colspan="1"
            :rowspan="
              12 +
                additionalNationalRows +
                additionalProvincialRows +
                additionalOtherRows -
                9
            "
          >
            参加的活动和获得的荣誉与奖励(自2011年起)
          </td>
          <td colspan="1" :rowspan="1 + additionalNationalRows">全国性</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <!-- 全国性活动 -->
        <tr
          v-for="(item, index) in dataform.fSheet3gList.filter(
            item => item.joinActivityTypeId === 1
          )"
          :key="`national-${index}`"
        >
          <td colspan="1">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.joinTime"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'national')
                "
              />
            </el-tooltip>
          </td>
          <td colspan="6">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.result"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index, 'national')
                "
              />
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="1 + additionalProvincialRows">省市级</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <!-- 省市级活动 -->
        <tr
          v-for="(item, index) in dataform.fSheet3gList.filter(
            item => item.joinActivityTypeId === 2
          )"
          :key="`provincial-${index}`"
        >
          <td colspan="1">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.joinTime"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index + 1, 'provincial')
                "
              />
            </el-tooltip>
          </td>
          <td colspan="6">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.result"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index + 1, 'provincial')
                "
              />
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="1 + additionalOtherRows">其他活动</td>
          <td colspan="1">参加时间</td>
          <td colspan="6">比赛/活动名称、奖励和荣誉</td>
        </tr>
        <!-- 其他活动 -->
        <tr
          v-for="(item, index) in dataform.fSheet3gList.filter(
            item => item.joinActivityTypeId === 3
          )"
          :key="`other-${index}`"
        >
          <td colspan="1">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.joinTime"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index + 1, 'other')
                "
              />
            </el-tooltip>
          </td>
          <td colspan="6">
            <el-tooltip
              content="右键点击可以新增或删除行"
              placement="top"
              effect="light"
              :open-delay="500"
            >
              <input
                type="text"
                v-model="item.result"
                @contextmenu.prevent="
                  showActivityContextMenu($event, index + 1, 'other')
                "
              />
            </el-tooltip>
          </td>
        </tr>
        <tr>
          <td colspan="1" style="height: 60px;">备注</td>
          <td colspan="8"><input type="text" v-model="dataform.memo" /></td>
        </tr>
        <tr>
          <td colspan="1" style="height: 80px;">单位简介</td>
          <td colspan="8"><input type="text" v-model="dataform.info" /></td>
        </tr>
      </tbody>
    </table>
    <div style="display: flex; justify-content: space-between;">
      <div>填表人：<input type="text" v-model="dataform.writePeople" /></div>
      <div>联系电话：<input type="text" v-model="dataform.writePhone" /></div>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div>填报时间：<input type="text" v-model="dataform.writeTime" /></div>
      <div>填报单位：<input type="text" v-model="dataform.orgName" /></div>
    </div>
    <!-- 添加右键菜单 -->
    <div v-show="showMenu" :style="menuStyle" class="context-menu">
      <div
        v-if="currentSection === 'traditionalSport'"
        @click="addRow"
        class="menu-item"
      >
        新增一个传统项目
      </div>
      <div
        v-if="currentSection === 'traditionalSport'"
        @click="deleteRow"
        class="menu-item"
      >
        删除这个传统项目
      </div>
      <div
        v-if="currentSection !== 'traditionalSport'"
        @click="addRow"
        class="menu-item"
      >
        新增一行
      </div>
      <div
        v-if="currentSection !== 'traditionalSport'"
        @click="deleteRow"
        class="menu-item"
      >
        删除当前行
      </div>
    </div>
  </div>
</template>

<script>
import { insert_update_sheet3 } from "@/api/statistics.js";

export default {
  props: {
    Alldata: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      showbutton: true,
      dataform: {
        orgName: "",
        intAddress: "",
        legalPerson: "",
        legalPersonPhone: "",
        vicePresident: "",
        vicePresidentPhone: "",
        groupLeader: "",
        groupLeaderPhone: "",
        groupLeaderEmail: "",
        phoneAddress: "",
        postcode: "",
        sportName: "",
        studentNum: "",
        schoolTypeId: "",
        schoolLevelId: "",
        getNationYear: "",
        getProvinceYear: "",
        getCityYear: "",
        getCountyYear: "",
        runningOne: "", //是否独立运作  1是 2否
        runningTwo: "", //同时开办青少年俱乐部  1是 2否
        runningThree: "", //与省市体校合办  1是 2否
        clubTeenager: "",
        clubSport: "",
        memo: "",
        info: "",
        writePeople: "",
        writeTime: "",
        writePhone: "",
        fSheet3bList: [
          {
            placeName: "",
            num: "",
            acreage: "",
            openState: "", //1开放 2不开放
            everydayOpen: "", //1开放 2不开放
            holidayOpen: "" //1开放 2不开放
          },
          {
            placeName: "",
            num: "",
            acreage: "",
            openState: "",
            everydayOpen: "",
            holidayOpen: ""
          },
          {
            placeName: "",
            num: "",
            acreage: "",
            openState: "",
            everydayOpen: "",
            holidayOpen: ""
          },
          {
            placeName: "",
            num: "",
            acreage: "",
            openState: "",
            everydayOpen: "",
            holidayOpen: ""
          },
          {
            placeName: "",
            num: "",
            acreage: "",
            openState: "",
            everydayOpen: "",
            holidayOpen: ""
          },
          {
            placeName: "",
            num: "",
            acreage: "",
            openState: "",
            everydayOpen: "",
            holidayOpen: ""
          },
          {
            placeName: "",
            num: "",
            acreage: "",
            openState: "",
            everydayOpen: "",
            holidayOpen: ""
          },
          {
            placeName: "",
            num: "",
            acreage: "",
            openState: "",
            everydayOpen: "",
            holidayOpen: ""
          }
        ],
        allMoney: "",
        avgMoney: "",
        traditionSportMoney: "",
        eduMoney: "",
        sportMoney: "",
        schoolMoney: "",
        otherMoney: "",
        benUpOn: "",
        benUpOut: "",
        benOn: "",
        benOut: "",
        benDownOn: "",
        benDownOut: "",
        levelOneOn: "",
        levelOneOut: "",
        levelTwoOn: "",
        levelTwoOut: "",
        levelThreeOn: "",
        levelThreeOut: "",
        levelFourOn: "",
        levelFourOut: "",
        fSheet3eList: [
          {
            traditionSportName: "",
            fullTimeTeacherNum: "",
            partTimeTeacherNum: "",
            teacherNum: "",
            coachNum: "",
            manGroupNum: "",
            womanGroupNum: "",
            secondLevelNum: "",
            otherNum: "",
            weekNum: "",
            everyTimeNum: ""
          },
          {
            traditionSportName: "",
            fullTimeTeacherNum: "",
            partTimeTeacherNum: "",
            teacherNum: "",
            coachNum: "",
            manGroupNum: "",
            womanGroupNum: "",
            secondLevelNum: "",
            otherNum: "",
            weekNum: "",
            everyTimeNum: ""
          },
          {
            traditionSportName: "",
            fullTimeTeacherNum: "",
            partTimeTeacherNum: "",
            teacherNum: "",
            coachNum: "",
            manGroupNum: "",
            womanGroupNum: "",
            secondLevelNum: "",
            otherNum: "",
            weekNum: "",
            everyTimeNum: ""
          }
        ],
        oneLineAllNum: "",
        oneLineUpNum: "",
        twoLineAllNum: "",
        twoLineUpNum: "",
        threeLineAllNum: "",
        threeLineUpNum: "",
        sportSchoolAllNum: "",
        sportSchoolUpNum: "",
        commonSchoolAllNum: "",
        commonSchoolUpNum: "",
        highSchoolAllNum: "",
        highSchoolUpNum: "",
        troopSchoolAllNum: "",
        troopSchoolUpNum: "",
        jobSchoolAllNum: "",
        jobSchoolUpNum: "",
        otherSchoolAllNum: "",
        otherSchoolUpNum: "",
        fSheet3gList: [
          {
            joinActivityTypeId: 1, //1 全国，2地市 3其他活动
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 1, //1 全国，2地市 3其他活动
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 1, //1 全国，2地市 3其他活动
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 2,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 2,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 2,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 3,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 3,
            joinTime: "",
            result: ""
          },
          {
            joinActivityTypeId: 3,
            joinTime: "",
            result: ""
          }
        ],
        currentActivityType: "" // 用于标识当前操作的活动类型
      },

      //学校重点类型 1省2市3县4普通 schoolLevelId
      schoolType: {
        province: "",
        city: "",
        county: "",
        Normal: ""
      },

      //学校类别 1小学 2初中 3高中 4小学初中一体 5初中高中一体 6小学初中高中一体 7中专、职高、技校等 schoolTypeId
      SchoolGeneralCategory: {
        PrimarySchool: "",
        JuniorHighSchool: "",
        SeniorHighSchool: "",
        PrimaryOrJuniorHigh: "",
        JuniorHighOrSeniorHigh: "",
        PrimaryOrJuniorHighOrSeniorHigh: "",
        rofessionalHighSchool: ""
      },
      showMenu: false,
      menuStyle: {
        left: "0px",
        top: "0px"
      },
      currentRowIndex: -1
    };
  },
  mounted() {
    // 点击其他地方时隐藏菜单
    document.addEventListener("click", this.hideContextMenu);
  },
  beforeDestroy() {
    document.removeEventListener("click", this.hideContextMenu);
  },
  //更新数据
  watch: {
    Alldata(newValue, oldValue) {
      this.dataform = newValue;

      //openState: "", //1开放 2不开放
      //     everydayOpen: "", //1开放 2不开放
      //     holidayOpen: "" //1开放 2不开放
      this.dataform.fSheet3bList.forEach(item => {
        //把0转成空，表格更好看
        if (item.num == "0") {
          item.num = "";
        }

        if (item.openState == 1) {
          item.openState = "√";
        } else {
          item.openState = "";
        }
        if (item.everydayOpen == 1) {
          item.everydayOpen = "√";
        } else {
          item.everydayOpen = "";
        }
        if (item.holidayOpen == 1) {
          item.holidayOpen = "√";
        } else {
          item.holidayOpen = "";
        }
      });
      // runningOne: '', //是否独立运作  1是 2否
      if (this.dataform.runningOne == 1) {
        this.dataform.runningOne = "√";
      } else {
        this.dataform.runningOne = "";
      }
      // runningTwo: '', //同时开办青少年俱乐部  1是 2否
      if (this.dataform.runningTwo == 1) {
        this.dataform.runningTwo = "√";
      } else {
        this.dataform.runningTwo = "";
      }
      // runningThree: '', //与省市体校合办  1是 2否
      if (this.dataform.runningThree == 1) {
        this.dataform.runningThree = "";
      } else {
        this.dataform.runningThree = "";
      }

      //学校重点类型 1省2市3县4普通 schoolLevelId

      if (this.dataform.schoolLevelId == "1") {
        this.schoolType.province = "√";
      } else if (this.dataform.schoolLevelId == "2") {
        this.schoolType.city = "√";
      } else if (this.dataform.schoolLevelId == "3") {
        this.schoolType.county = "√";
      } else if (this.dataform.schoolLevelId == "4") {
        this.schoolType.Normal = "√";
      }

      //学校类别 1小学 2初中 3高中 4小学初中一体 5初中高中一体 6小学初中高中一体 7中专、职高、技校等 schoolTypeId
      if (this.dataform.schoolTypeId == "1") {
        this.SchoolGeneralCategory.PrimarySchool = "√";
      } else if (this.dataform.schoolTypeId == "2") {
        this.SchoolGeneralCategory.JuniorHighSchool = "√";
      } else if (this.dataform.schoolTypeId == "3") {
        this.SchoolGeneralCategory.SeniorHighSchool = "√";
      } else if (this.dataform.schoolTypeId == "4") {
        this.SchoolGeneralCategory.PrimaryOrJuniorHigh = "√";
      }
      if (this.dataform.schoolTypeId == "5") {
        this.SchoolGeneralCategory.JuniorHighOrSeniorHigh = "√";
      }
      if (this.dataform.schoolTypeId == "6") {
        this.SchoolGeneralCategory.PrimaryOrJuniorHighOrSeniorHigh = "√";
      }
      if (this.dataform.schoolTypeId == "7") {
        this.SchoolGeneralCategory.rofessionalHighSchool = "√";
      }
    }
  },

  methods: {
    button1() {
      this.showbutton = false;
    },

    submit() {
      //学校重点类型 1省2市3县4普通 schoolLevelId

      if (this.schoolType.province) {
        this.dataform.schoolLevelId = "1";
      } else if (this.schoolType.city) {
        this.dataform.schoolLevelId = "2";
      } else if (this.schoolType.county) {
        this.dataform.schoolLevelId = "3";
      } else if (this.schoolType.Normal) {
        this.dataform.schoolLevelId = "4";
      }

      //学校类别 1小学 2初中 3高中 4小学初中一体 5初中高中一体 6小学初中高中一体 7中专、职高、技校等 schoolTypeId
      if (this.SchoolGeneralCategory.PrimarySchool) {
        this.dataform.schoolTypeId = "1";
      } else if (this.SchoolGeneralCategory.JuniorHighSchool) {
        this.dataform.schoolTypeId = "2";
      } else if (this.SchoolGeneralCategory.SeniorHighSchool) {
        this.dataform.schoolTypeId = "3";
      } else if (this.SchoolGeneralCategory.PrimaryOrJuniorHigh) {
        this.dataform.schoolTypeId = "4";
      }
      if (this.SchoolGeneralCategory.JuniorHighOrSeniorHigh) {
        this.dataform.schoolTypeId = "5";
      }
      if (this.SchoolGeneralCategory.PrimaryOrJuniorHighOrSeniorHigh) {
        this.dataform.schoolTypeId = "6";
      }
      if (this.SchoolGeneralCategory.rofessionalHighSchool) {
        this.dataform.schoolTypeId = "7";
      }

      // runningOne: '', //是否独立运作  1是 2否
      if (this.dataform.runningOne) {
        this.dataform.runningOne = "1";
      } else {
        this.dataform.runningOne = "2";
      }
      // runningTwo: '', //同时开办青少年俱乐部  1是 2否
      if (this.dataform.runningTwo) {
        this.dataform.runningTwo = "1";
      } else {
        this.dataform.runningTwo = "2";
      }
      // runningThree: '', //与省市体校合办  1是 2否
      if (this.dataform.runningThree) {
        this.dataform.runningThree = "1";
      } else {
        this.dataform.runningThree = "2";
      }

      //openState: "", //1开放 2不开放
      //     everydayOpen: "", //1开放 2不开放
      //     holidayOpen: "" //1开放 2不开放
      this.dataform.fSheet3bList.forEach(item => {
        if (item.openState) {
          item.openState = "1";
        } else {
          item.openState = "2";
        }
        if (item.everydayOpen) {
          item.everydayOpen = "1";
        } else {
          item.everydayOpen = "2";
        }
        if (item.holidayOpen) {
          item.holidayOpen = "1";
        } else {
          item.holidayOpen = "2";
        }
      });

      insert_update_sheet3(this.dataform).then(res => {
        if ((res.code = 200)) {
          this.dataform.fSheet3bList.forEach(item => {
            if (item.openState == 1) {
              item.openState = "√";
            } else {
              item.openState = "";
            }
            if (item.everydayOpen == 1) {
              item.everydayOpen = "√";
            } else {
              item.everydayOpen = "";
            }
            if (item.holidayOpen == 1) {
              item.holidayOpen = "√";
            } else {
              item.holidayOpen = "";
            }
          });
          // runningOne: '', //是否独立运作  1是 2否
          if (this.dataform.runningOne == 1) {
            this.dataform.runningOne = "√";
          } else {
            this.dataform.runningOne = "";
          }
          // runningTwo: '', //同时开办青少年俱乐部  1是 2否
          if (this.dataform.runningTwo == 1) {
            this.dataform.runningTwo = "√";
          } else {
            this.dataform.runningTwo = "";
          }
          // runningThree: '', //与省市体校合办  1是 2否
          if (this.dataform.runningThree == 1) {
            this.dataform.runningThree = "√";
          } else {
            this.dataform.runningThree = "";
          }

          this.$message.success("报成功");
        }
      });
    },

    // 显示右键菜单
    showContextMenu(event, index) {
      this.showMenu = true;
      this.currentSection = "place";
      this.currentRowIndex = index;
      this.menuStyle = {
        left: event.clientX + "px",
        top: event.clientY + "px"
      };
    },

    // 隐藏右键菜单
    hideContextMenu() {
      this.showMenu = false;
      this.currentSection = "";
    },

    // 新增一行
    addRow() {
      if (this.currentSection === "activity") {
        const newActivity = {
          joinActivityTypeId:
            this.currentActivityType === "national"
              ? 1
              : this.currentActivityType === "provincial"
              ? 2
              : 3,
          joinTime: "",
          result: ""
        };

        // 根据不同类型在不同位置插入
        let insertIndex =
          this.currentActivityType === "national"
            ? 3
            : this.currentActivityType === "provincial"
            ? 6
            : 9;

        this.dataform.fSheet3gList.splice(insertIndex, 0, newActivity);
      } else if (this.currentSection === "traditionalSport") {
        // 传统项目添加逻辑
        const lastItem = {
          ...this.dataform.fSheet3eList[this.dataform.fSheet3eList.length - 1]
        };
        // 清空所有值
        Object.keys(lastItem).forEach(key => {
          if (key !== "id") lastItem[key] = "";
        });
        this.dataform.fSheet3eList.push(lastItem);
      } else if (this.currentSection === "place") {
        // 体育场地添加行逻辑
        const newRows = [
          {
            placeName: "",
            num: "",
            acreage: "",
            openState: "",
            everydayOpen: "",
            holidayOpen: ""
          }
        ];
        this.dataform.fSheet3bList.splice(this.currentRowIndex + 1, 0, newRows);
      }
      this.hideContextMenu();
    },

    deleteRow() {
      if (this.currentSection === "activity") {
        // 活动删除逻辑
        let currentTypeRows;
        let startIndex;

        if (this.currentActivityType === "national") {
          currentTypeRows = this.dataform.fSheet3gList.filter(
            item => item.joinActivityTypeId === 1
          );
          startIndex = 0;
        } else if (this.currentActivityType === "provincial") {
          currentTypeRows = this.dataform.fSheet3gList.filter(
            item => item.joinActivityTypeId === 2
          );
          startIndex = this.dataform.fSheet3gList.filter(
            item => item.joinActivityTypeId === 1
          ).length;
        } else {
          // other
          currentTypeRows = this.dataform.fSheet3gList.filter(
            item => item.joinActivityTypeId === 3
          );
          startIndex = this.dataform.fSheet3gList.filter(
            item => item.joinActivityTypeId !== 3
          ).length;
        }

        if (currentTypeRows.length > 1) {
          const actualIndex =
            startIndex +
            currentTypeRows.findIndex(
              item =>
                item.joinTime ===
                  this.dataform.fSheet3gList[this.currentRowIndex].joinTime &&
                item.result ===
                  this.dataform.fSheet3gList[this.currentRowIndex].result
            );
          this.dataform.fSheet3gList.splice(actualIndex, 1);
        }
      } else if (this.currentSection === "traditionalSport") {
        // 传统项目删除逻辑
        if (this.dataform.fSheet3eList.length > 2) {
          this.dataform.fSheet3eList.splice(this.currentRowIndex, 1);
        }
      } else if (this.currentSection === "place") {
        // 体育场地删除行逻辑
        if (this.dataform.fSheet3bList.length > 1) {
          this.dataform.fSheet3bList.splice(this.currentRowIndex, 1);
        }
      }
      this.hideContextMenu();
    },

    showTraditionalSportContextMenu(event, index) {
      // 只有点击最后一个传统项目时才显示菜单
      if (index === this.dataform.fSheet3eList.length - 1) {
        this.showMenu = true;
        this.currentSection = "traditionalSport";
        this.menuStyle = {
          left: event.clientX + "px",
          top: event.clientY + "px"
        };
      }
    },

    showActivityContextMenu(event, index, type) {
      this.showMenu = true;
      this.currentSection = "activity";
      this.currentRowIndex = index;
      this.currentActivityType = type;
      this.menuStyle = {
        left: event.clientX + "px",
        top: event.clientY + "px"
      };
    }
  },
  computed: {
    additionalNationalRows() {
      return this.dataform.fSheet3gList.filter(
        item => item.joinActivityTypeId === 1
      ).length;
    },
    additionalProvincialRows() {
      return this.dataform.fSheet3gList.filter(
        item => item.joinActivityTypeId === 2
      ).length;
    },
    additionalOtherRows() {
      return this.dataform.fSheet3gList.filter(
        item => item.joinActivityTypeId === 3
      ).length;
    }
  }
};
</script>

<style scoped>
table {
  border-collapse: collapse;
  /* //合并为一个单一的边框 */
  border-color: #a2a7ab;
  /* //边框颜色按实际自定义即可 */
  margin-bottom: 10px;
}

thead tr th {
  background-color: #f8f8f9;
  /* //设置表格标题背景色 */
  padding: 3px;
  text-align: center;
}

tbody tr td {
  padding: 3px;
  text-align: center;
  height: 34px;
  /* //设置单元格最小高度 */
}
tbody tr td input {
  width: 99%;
  height: 95%;
  text-align: center;
  border: none;
  background: transparent;
}

.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 0;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.menu-item {
  padding: 8px 12px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #f5f5f5;
}
</style>
